<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>添加用户</h3>
			name：<input type="text" v-model="name"  /><br />
			age：<input type="text" v-model.number="age" /><br />
			address：<input type="text" v-model="address" /><br />
			<button type="button" v-on:click="insertUser()">添加用户</button>
			
			
			<hr >
			
			
			<h3>修改数据</h3>
			ID:<input type="text" v-model="id" disabled="disabled"/><br>
			name：<input type="text" v-model="name" /><br />
			age：<input type="text" v-model.number="age" /><br />
			address：<input type="text" v-model="address" /><br />
			<button type="button" v-on:click="insertUser()">修改数据</button>
			
			<table border="1px" cellspacing="0px" cellpadding="0px" align="center" width="500px">
				<tr>
					<th>ID</th>
					<th>name</th>
					<th>age</th>
					<th>address</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.address"></td>
					<td align="center">
						<button type="button" v-on:click="deleteUserById(item.id)">删除</button>
						<button type="button" v-on:click="updateUserByIdHuiXian(item.id)">修改</button>
					</td>
				</tr>
			</table>
		
		</div>
		
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		
		
		
		<script type="text/javascript">
				const vue =  new Vue({
					el: "#app",
					data: {
						//展示用户
						userList: [],
						id: "",
						//添加用户
						name: "",
						age: "",
						address: ""
					},
					methods:{
						//发送get请求获取数据
						getUserList: function(){
							axios.get("http://localhost:8081/findAll")
							.then(result => {this.userList = result.data})
							.catch(function(error){console.log(error)})
						},
						//发送delete请求删除数据，根据id
						deleteUserById: function(id){
							axios.delete("http://localhost:8081/user/"+id)
							.then(result => {
								//注意：在这个地方，重新加载页面,固定的格式
								this.getUserList()
							})
							.catch()
						},
						//发送post请求，添加数据
						insertUser: function(){
							axios.post("http://localhost:8081/insertUser",{
								name: this.name,
								age: this.age,
								address: this.address
							}).then(result => {
								this.getUserList()
							})
						},
						//发送get请求，回显数据（回显数据）
						updateUserByIdHuiXian: function(id){
							axios.get("http://localhost:8081/user/"+id)
							.then(result => {
								this.id = result.data.id,
								this.name = result.data.name;
								this.age = result.data.age,
								this.address = result.data.address
							})
						},
						//发送put请求，修改数据
						updateUserById: function(){
							axios.put("http://localhost:8081/updateUser",{
								name: this.name,
								age: this.age,
								address: this.address
							}).then(result => {
								this.getUserList()
							})
						}
					},
					mounted() {
						this.getUserList();
					}
				})
		</script>
		
	</body>
</html>
